import React, { useState, useRef } from 'react';
import { List, SearchBar, Modal } from 'antd-mobile';
import _ from 'loadsh';
import classnames from 'classnames';
import ListView, { ListViewProps } from '../ListView';
import SearchIcon from './icon.png';
import './index.less';

export interface SearchItemProps extends ListViewProps {
  value?: { id: number | string; name: string };
  /**
   * 显示格式转换
   */
  formatText?: (value) => string;
  placeholder?: string;
  onChange?: (data) => void;
  disabled?: boolean;
  dismissText?: string;
  okText?: string;
  title?: string;
  /**
   * 是否自定触发搜索
   */
  auto?: boolean;
}
const SearchItem: React.FunctionComponent<SearchItemProps> = ({
  value,
  placeholder = '点击搜索',
  formatText,
  getData,
  renderRow,
  onChange,
  disabled,
  okText,
  dismissText,
  title,
  auto,
  ...others
}) => {
  const [visible, setVisible] = useState(false);
  const listView = useRef<any>();

  const handleClick = () => {
    if (disabled) return;
    setVisible(true);
  };

  const close = () => {
    setVisible(false);
  };

  const handleSearchChange = _.debounce((searchValue) => {
    if (!auto) return;
    console.log(searchValue, 222);
    listView.current.reset({ searchValue });
  }, 500);

  const handleSearchSubmit = (searchValue) => {
    listView.current.reset({ searchValue });
  };
  /**
   * 显示的文案
   * 是value还是placeholder
   */
  let extraString = placeholder;
  if (value) {
    if (formatText && typeof formatText === 'function') {
      extraString = formatText(value);
    } else {
      extraString = value.name;
    }
  }

  /**
   * 选中一行
   * @param rowData
   */
  const selectRow = (rowData) => {
    if (onChange && typeof onChange === 'function') {
      onChange(rowData);
      close();
    }
  };

  /**
   * 渲染行
   * @param rowData
   * @param sectionID
   * @param rowID
   * @param highlightRow
   */
  const row = (
    rowData: any,
    sectionID: string | number,
    rowID: string | number,
    highlightRow?: boolean,
  ) => {
    return (
      <div onClick={() => selectRow(rowData)}>
        {renderRow(rowData, sectionID, rowID, highlightRow)}
      </div>
    );
  };
  const handleOk = () => {
    close();
  };
  const handleDismiss = () => {};

  return (
    <div {...others} className={classnames('hr-search-item', { placeholder: !value, disabled })}>
      <List.Item
        extra={
          <div>
            {extraString}
            <img className="hr-search-item-icon" src={SearchIcon} alt="icon" />
          </div>
        }
        onClick={handleClick}
      >
        <span className="require-icon">*</span>
        {title}
      </List.Item>
      <Modal
        popup
        visible={visible}
        animationType="slide-up"
        className="search-item-modal"
        onClose={close}
      >
        <div className="hr-picker-popup-header">
          <div className="hr-picker-popup-item hr-picker-popup-header-left" onClick={handleDismiss}>
            {dismissText}
          </div>
          <div className="hr-picker-popup-item hr-picker-popup-title">{title}</div>
          <div className="hr-picker-popup-item hr-picker-popup-header-right" onClick={handleOk}>
            {okText}
          </div>
        </div>
        <SearchBar
          placeholder="请输入关键字搜索"
          onChange={handleSearchChange}
          onSubmit={handleSearchSubmit}
        />
        <ListView
          ref={listView}
          className="hr-search-item-listview"
          getData={getData}
          renderRow={row}
          renderBodyComponent={() => <Mybody />}
          useBodyScroll={false}
        />
      </Modal>
    </div>
  );
};

const Mybody = (props) => {
  return <div className="hr-search-item-listview-body">{props.children}</div>;
};

SearchItem.defaultProps = {
  okText: '关闭',
  dismissText: '',
  title: '',
  auto: false,
};
export default SearchItem;
